<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item>发现音乐</el-breadcrumb-item>
    <el-button @click="ToUpData"
      ><el-icon><RefreshLeft /></el-icon
    ></el-button>
  </el-breadcrumb>
</template>

<script>
import { RefreshLeft, ArrowRight } from "@element-plus/icons-vue";
import HomeResource from "./HomeResource.vue";
import { mapState, mapMutations, useStore } from "vuex";
import { onMounted } from "@vue/runtime-core";
import { get } from "../../request/Home/App_resData";
import { ElMessage } from "element-plus";

export default {
  components: {
    RefreshLeft,
    ArrowRight,
  },
  methods: {
    ToUpData() {
      get("/personalized?limit=20")
        .then((res) => {
          if (this.$store.state.musicData[0].id == res.data.result[0].id) {
            ElMessage({
              message: "已经是最新内容拉！",
              grouping: true,
              type: "success",
            });
          } else {
            this.$store.state.musicData = res.data.result;
            ElMessage({
              message: "更新完成",
              grouping: true,
              type: "success",
            });
          }
        })
        .catch((err) => {
           ElMessage.error('网络错误')
        });
    },
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  font-size: 18px;
}
.el-button {
  float: right;
  margin-right: 30px;
}
</style>
